import React, { useEffect } from 'react';
import { Card, Space, Button, Divider, Typography, Tabs } from 'antd';
import { useLocation } from 'react-router-dom';
import * as echarts from 'echarts/core';
import ReactECharts from 'echarts-for-react';
import { registerMap } from 'echarts/core';
import guangdong from 'echarts/map/json/province/guangdong.json';

import { getCultPopDetail } from '@/api/cultruePop';
import { urlMap, imagesMap } from '@/utils';
import { COLOR_THEME } from '@/config/theme';
import './index.scss';

// function ArticleDetail() {

//   return (
//      <div
//         className="art-container"
//         style={{
//           backgroundColor: `${COLOR_THEME.BG_SECONDARY}`,
//         }}
//       >
//         <Card
//            title={<h1>广绣</h1>}
//           className="art-card"
//           styles={{
//             header: {
//               backgroundColor: `${COLOR_THEME.BG_TERTIARY}`,
//               width: '100%',
//               height: '80px'
//             }
//           }}
//         >
//          <div style={{
//           padding: '20px',
//           fontFamily: 'Arial, sans-serif',
//           display: 'flex',
//           gap: '40px'
//           }}>
//               <div style={{ flex: 1 }}>
//               <h1>简介</h1>
//             <p>
//               广绣是广州及其古属地南海、番禺、顺德等地民间刺绣的统称。粤绣是流传于广州及其古属地南海、番禺、顺德等地的民间刺绣工艺，至今已有一千多年的历史。
//             </p>

//             <h2>历史起源</h2>
//             <h3>起源</h3>
//             <p>
//               广绣起源可追溯至唐代，与中原移民南迁带入的刺绣技艺密切相关。此外，广绣也与黎族刺绣同源，黎族人擅长在棉布上用彩色丝线绣出几何图案。
//             </p>
//             <h3>发展</h3>
//             <p>
//               唐宋时期：广绣技艺逐渐成熟，唐代已有绣品作为商品销往海外。宋代，广东桑蚕业发展，广绣工艺更加精湛。
//             </p>

//             <h2>制作流程</h2>
//             <ol>
//               <li>设计图案：根据需求设计花鸟、人物、山水等图案，考虑布局和色彩搭配。</li>
//               <li>准备材料：准备好绣布、绣线、绣针和绣绷等工具。</li>
//               <li>绣绷固定：将绣布平整地固定在绣绷上。</li>
//               <li>转印图案：把设计好的图案转印到绣布上。</li>
//               <li>刺绣过程：用合适的针法（如平针、套针等）进行刺绣，注意针脚平整和色彩过渡。</li>
//               <li>修饰与整理：修剪线头、熨烫平整，复杂绣品可装裱加工。</li>
//             </ol>

//             <h2>文化象征</h2>
//             <p>
//               广绣是岭南文化的代表，体现了岭南地区自由直率的文化特质和民间艺术的装饰风格。
//             </p>
//               </div>
//               <div style={{
//               width: '30%',
//               display: 'flex',
//               flexDirection: 'column',
//               gap: '20px'
//             }}>
//                             <div>
//                 <img
//                   src={require('@/assets/images/article/1.jpg')}
//                   alt="广绣荔枝图"
//                   style={{
//                     width: '100%',
//                     height: '200px',
//                     objectFit: 'cover',
//                     borderRadius: '8px',
//                     marginBottom: '8px'  // 添加下边距
//                   }}
//                 />
//                 <p style={{ textAlign: 'center', color: '#666' }}>广绣荔枝图</p>
//               </div>

//               <div>
//                 <img
//                   src={require('@/assets/images/article/2.png')}
//                   alt="广绣木棉花"
//                   style={{
//                     width: '100%',
//                     height: '300px',
//                     objectFit: 'cover',
//                     borderRadius: '8px',
//                     marginBottom: '8px'  // 添加下边距
//                   }}
//                 />
//                 <p style={{ textAlign: 'center', color: '#666' }}>木棉红棉图</p>
//               </div>

//               <div>
//                 <img
//                   src={require('@/assets/images/article/3.jpg')}
//                   alt="广绣木棉花"
//                   style={{
//                     width: '100%',
//                     height: '300px',
//                     objectFit: 'cover',
//                     borderRadius: '8px',
//                     marginBottom: '8px'  // 添加下边距
//                   }}
//                 />
//                 <p style={{ textAlign: 'center', color: '#666' }}>传统绣品</p>
//               </div>
//             </div>
//           </div>
//         </Card>
//       </div>
//   );
// }
// 新增数据结构
const articleData = {
    title: '广绣',
    content: [
        { type: 'heading', level: 1, text: '简介' },
        {
            type: 'paragraph',
            text: '广绣是广州及其古属地南海、番禺、顺德等地民间刺绣的统称。粤绣是流传于广州及其古属地南海、番禺、顺德等地的民间刺绣工艺，至今已有一千多年的历史。',
        },

        { type: 'heading', level: 2, text: '历史起源' },
        { type: 'heading', level: 3, text: '起源' },
        {
            type: 'paragraph',
            text: '广绣起源可追溯至唐代，与中原移民南迁带入的刺绣技艺密切相关。此外，广绣也与黎族刺绣同源，黎族人擅长在棉布上用彩色丝线绣出几何图案。',
        },

        { type: 'heading', level: 3, text: '发展' },
        {
            type: 'paragraph',
            text: '唐宋时期：广绣技艺逐渐成熟，唐代已有绣品作为商品销往海外。宋代，广东桑蚕业发展，广绣工艺更加精湛。',
        },

        { type: 'heading', level: 2, text: '制作流程' },
        {
            type: 'list',
            items: [
                '设计图案：根据需求设计花鸟、人物、山水等图案，考虑布局和色彩搭配。',
                '准备材料：准备好绣布、绣线、绣针和绣绷等工具。',
                '绣绷固定：将绣布平整地固定在绣绷上。',
                '转印图案：把设计好的图案转印到绣布上。',
                '刺绣过程：用合适的针法（如平针、套针等）进行刺绣，注意针脚平整和色彩过渡。',
                '修饰与整理：修剪线头、熨烫平整，复杂绣品可装裱加工。',
            ],
        },

        { type: 'heading', level: 2, text: '文化象征' },
        { type: 'paragraph', text: '广绣是岭南文化的代表，体现了岭南地区自由直率的文化特质和民间艺术的装饰风格。' },
    ],
    images: [
        { src: require('@/assets/images/article/1.jpg'), alt: '广绣荔枝图', height: 200, desc: '广绣荔枝图' },
        { src: require('@/assets/images/article/2.png'), alt: '广绣木棉花', height: 300, desc: '木棉红棉图' },
        { src: require('@/assets/images/article/3.jpg'), alt: '传统绣品', height: 300, desc: '传统绣品' },
    ],
};
const articleData1 = {
    title: '波罗诞',
    content: [
        { type: 'heading', level: 1, text: ' 简介 ' },
        {
            type: 'paragraph',
            text: ' 波罗诞，又称南海神诞，是广东省广州市黄埔区极具特色的传统民俗，也是中国唯一针对海神的祭祀活动 ，在广东及周边地区影响深远。该节日历史悠久，承载着深厚的文化内涵。',
        },
        { type: 'heading', level: 2, text: ' 历史起源 ' },
        { type: 'heading', level: 3, text: ' 起源 ' },
        {
            type: 'paragraph',
            text: ' 波罗诞的起源可追溯至隋朝开皇十四年（594 年），彼时隋文帝为祭海，在广州靠海处建立南海神庙，此地逐渐成为祭祀海神的重要场所。关于节日名称，“波罗” 一词源于梵语 “Patala”，意为 “彼岸” 。传说唐代一位印度商人在南海神庙附近种植波罗树（菩提树），后人为纪念他，将神庙所在村落称为 “波罗庙”，其诞辰庆典便称为 “波罗诞”。有观点认为，波罗诞最初是民间为纪念海神祝融（南海神）诞辰而设的庙会，不过其确切起源时间已难考证。',
        },
        { type: 'heading', level: 3, text: ' 发展 ' },
        {
            type: 'paragraph',
            text: ' 宋代：从北宋诗人杨万里 “大海更在小海东，西庙不如东庙雄。南来若不到东庙，西京未睹建章宫” 等诗作中，可推断宋代时波罗诞已具一定规模，当时南海神庙周边热闹非凡，民众参与度极高。明代：开国皇帝朱元璋重视神祭祀，民间对南海神的崇拜也随之升温，加之文人墨客的推动，波罗诞逐渐形成自身特色。清代：随着扶胥港商贸衰落，波罗诞的功能更多地转变为民俗活动，民间祭祀和娱乐活动愈发热闹，在嘉庆年间举人崔弼所撰《波罗外纪》中，有对当时庙会 “波罗庙每岁二月初旬，远近环集，楼船花艇，小舟大舸，连泊十余里。有不能就岸者，架长篙接木板作桥，越数十重船以渡” 的盛况描述 。',
        },
        { type: 'heading', level: 2, text: ' 特色活动 ' },
        { type: 'heading', level: 3, text: ' 五子朝王 ' },
        {
            type: 'paragraph',
            text: ' 这是波罗诞庙会中极为盛大的民俗文化活动。相传南海神有五个儿子，分别是大安、元安、始安、长安、祖安。在波罗诞正诞日，供奉这五子神像的十五乡乡民会抬着神像前往南海神庙中庭，向南海神祝寿，此为 “朝王”。之后，乡民们会将五子神像抬回本村游神，接受乡民祭拜，再将神像送至下一年的当值村游神，完成 “游神” 环节 。该活动遵循一年一小祭、三年一中祭、五年一大祭的传统，重现了古代祭祀的宏大场面，充分展示了岭南民俗文化。',
        },
        { type: 'heading', level: 3, text: ' 仿古祭海仪式 ' },
        {
            type: 'paragraph',
            text: ' 此仪式是南海神庙的传统活动，模仿古代祭祀海神的礼制，将广东特色吹打乐融入其中。南海神庙在古代既是国家祭祀的重要场所，也是民间祈福之地。正诞之日，周边民众会延续古老传统祭祀海神。2006 年，仿古祭海仪式首次推出，2009 年表演形式调整，演员阵容更为庞大，民俗风格愈发突出 。',
        },
        { type: 'heading', level: 3, text: ' 花朝节 ' },
        {
            type: 'paragraph',
            text: ' 波罗诞恢复了传统的 “花朝节”。在这一节日里，人们会举办与花相关的活动，如赏花、簪花等，为庙会增添了浪漫的氛围 。',
        },
        { type: 'heading', level: 3, text: ' 工艺与美食展示 ' },
        {
            type: 'paragraph',
            text: ' 庙会期间设有工艺集市和美食街区，汇聚了众多岭南特色工艺品和美食。如波罗粽，今年品种丰富，有红豆沙、五花瘦肉等十几种口味，备受游客喜爱 。还有萝卜糕等特色小吃，以及融合了黄埔区 “百千万工程” 的产品也在现场展示售卖。',
        },
        { type: 'heading', level: 2, text: ' 文化象征 ' },
        {
            type: 'paragraph',
            text: ' 海神信仰传承：波罗诞体现了人们对海神的信仰与敬畏。在过去，航海充满未知与危险，人们祈求海神庇佑，保佑航海平安、渔业丰收。这种信仰历经千年，已深深扎根于当地民众心中，成为一种文化传承。南海神庙作为祭祀海神的核心场所，见证了这一信仰的延续，承载着人们对美好生活的向往和追求 。海上丝绸之路印记：南海神庙所在的扶胥古港是古代海上丝绸之路的重要发祥地之一。波罗诞作为与南海神庙紧密相关的民俗活动，反映了古代广州海上贸易的繁荣。它象征着广州在海上丝绸之路中的重要地位，是海丝文化的精神象征，见证了中外经济文化交流的历史 。岭南民俗文化窗口：波罗诞汇聚了众多岭南特色民俗活动，如五子朝王、龙狮相会、大戏杂耍等，展示了岭南地区丰富多彩的民俗文化。从传统的祭祀仪式到民间的娱乐表演，从特色工艺品制作到美食文化，都体现了岭南地区独特的文化魅力，为人们了解岭南民俗文化提供了重要窗口 。凝聚地方社群：波罗诞期间，周边地区民众广泛参与，不同村落、不同群体通过共同参与祭祀、游神等活动，加强了彼此之间的联系与交流，增进了地方社群的凝聚力和认同感 。',
        },
    ],
    images: [
        { src: require('@/assets/images/article/10.jpg'), alt: '菠萝鸡', height: 200, desc: '菠萝鸡' },
        { src: require('@/assets/images/article/11.jpg'), alt: '醒狮', height: 300, desc: '醒狮' },
    ],
};
const articleData2 = {
    title: '英德闹花灯',
    content: [
        { type: 'heading', level: 1, text: ' 简介 ' },
        {
            type: 'paragraph',
            text: ' 英德闹花灯是广东省英德市极具地方特色的传统民俗活动，它不仅是一场视觉盛宴，更承载着英德人民对美好生活的向往和祝福，在当地及周边地区有着深厚的群众基础和广泛的影响力。',
        },
        { type: 'heading', level: 2, text: ' 历史起源 ' },
        { type: 'heading', level: 3, text: ' 起源 ' },
        {
            type: 'paragraph',
            text: ' 英德闹花灯的起源可追溯至古代，具体时间已难以精确考证。在过去，英德地区的人们为了祈求风调雨顺、五谷丰登、阖家平安，便有了在特定节日悬挂花灯、举行庆祝活动的习俗。随着时间的推移，这一习俗逐渐发展成热闹非凡的闹花灯活动。',
        },
        { type: 'heading', level: 3, text: ' 发展 ' },
        {
            type: 'paragraph',
            text: ' 过去：在历史的长河中，英德闹花灯活动一直是当地人民重要的文化娱乐方式。每到花灯节，家家户户都会制作精美的花灯，悬挂在门前，街道上张灯结彩，热闹非凡。人们还会举行各种表演活动，如舞龙舞狮、猜灯谜等，吸引了众多村民参与。现在：如今，英德闹花灯活动不仅保留了传统的元素，还融入了现代科技和艺术元素。花灯的制作更加精美，造型更加多样，灯光效果也更加绚丽。同时，活动的规模也不断扩大，吸引了越来越多的游客前来观赏。',
        },
        { type: 'heading', level: 2, text: ' 特色活动 ' },
        { type: 'heading', level: 3, text: ' 花灯巡游 ' },
        {
            type: 'paragraph',
            text: ' 这是英德闹花灯活动中最为壮观的环节。夜幕降临，各式各样的花灯在队伍的引领下，沿着街道缓缓巡游。花灯的造型丰富多样，有传统的动物造型，如龙、凤、鱼等，也有现代的卡通形象和科技元素。巡游队伍中还伴有舞龙舞狮表演，锣鼓喧天，热闹非凡。',
        },
        { type: 'heading', level: 3, text: ' 猜灯谜 ' },
        {
            type: 'paragraph',
            text: ' 猜灯谜是英德闹花灯活动中深受人们喜爱的传统项目。在花灯集中的地方，挂满了写有灯谜的纸条。参与者可以根据谜面猜出谜底，猜对者还能获得小奖品。这一活动不仅增添了节日的趣味性，还考验了人们的智慧和文化素养。',
        },
        { type: 'heading', level: 3, text: ' 花灯比赛 ' },
        {
            type: 'paragraph',
            text: ' 为了鼓励人们积极参与花灯制作，英德闹花灯活动还会举办花灯比赛。参赛者们会发挥自己的创意和技艺，制作出独具特色的花灯。比赛评选出一、二、三等奖，获奖者将获得荣誉证书和奖金。这一活动激发了人们的创造力，也提高了花灯的制作水平。',
        },
        { type: 'heading', level: 2, text: ' 文化象征 ' },
        {
            type: 'paragraph',
            text: ' 祈福纳祥：英德闹花灯体现了人们对美好生活的向往和祝福。在花灯的照耀下，人们祈求新的一年风调雨顺、五谷丰登、阖家平安。这种美好的愿望通过闹花灯的形式得以传承和表达。传统文化传承：英德闹花灯是英德地区传统文化的重要组成部分，它承载着当地人民的历史记忆和文化传统。通过参与闹花灯活动，人们能够更好地了解和传承英德的传统文化。地方凝聚力增强：英德闹花灯活动吸引了当地居民和游客的广泛参与，大家在欣赏花灯、参与活动的过程中，增进了彼此之间的交流和互动，增强了地方的凝聚力和认同感。',
        },
    ],
    // images: [
    //     {
    //         src: require('@/assets/images/article/yingde_lantern_1.jpg'),
    //         alt: '英德特色花灯',
    //         height: 200,
    //         desc: '英德特色花灯'
    //     },
    //     {
    //         src: require('@/assets/images/article/yingde_lantern_2.jpg'),
    //         alt: '花灯巡游队伍',
    //         height: 300,
    //         desc: '花灯巡游队伍'
    //     }
    // ]
};
const articleData3 = {
    title: '瑶族长鼓舞',
    content: [
        { type: 'heading', level: 1, text: ' 简介 ' },
        {
            type: 'paragraph',
            text: ' 瑶族长鼓舞是瑶族传统舞蹈中的艺术瑰宝，具有独特的民族风格和深厚的文化内涵。它以其独特的舞蹈动作、鲜明的节奏韵律和精美的长鼓道具，展现了瑶族人民的智慧和创造力，在瑶族的历史文化传承中占据着重要地位，深受瑶族人民喜爱，并在国内外享有较高的知名度。',
        },
        { type: 'heading', level: 2, text: ' 历史起源 ' },
        { type: 'heading', level: 3, text: ' 起源 ' },
        {
            type: 'paragraph',
            text: ' 瑶族长鼓舞的起源可追溯到非常久远的年代。相传，瑶族的祖先盘王在一次狩猎中不幸被野羊撞下山崖身亡，儿女们为报父仇，猎获野羊，剥皮制成长鼓，击鼓而舞，以表示对盘王的怀念。此后，长鼓舞便在瑶族中世代相传，成为祭祀盘王、庆祝丰收等重要活动中不可或缺的内容。也有说法认为长鼓舞与瑶族早期的生产生活密切相关，是对劳动场景和战斗场面的艺术再现。',
        },
        { type: 'heading', level: 3, text: ' 发展 ' },
        {
            type: 'paragraph',
            text: ' 过去：在漫长的历史发展过程中，瑶族长鼓舞一直是瑶族人民祭祀祖先、祈求神灵庇佑、庆祝节日和丰收的重要方式。它通常在瑶族的重大节日，如盘王节、春节等场合表演，舞者们身着传统服饰，手持长鼓，在庄重的仪式中翩翩起舞，传承着民族的信仰和文化。现在：随着时代的发展，瑶族长鼓舞在保留传统精髓的基础上，不断创新和发展。它不仅在瑶族地区的传统节日中继续绽放光彩，还走出大山，登上了国内外的舞台，成为展示瑶族文化魅力的重要窗口。同时，瑶族长鼓舞也被纳入了非物质文化遗产保护项目，得到了更广泛的关注和保护，许多年轻人开始学习和传承这一传统舞蹈，使其焕发出新的生机与活力。',
        },
        { type: 'heading', level: 2, text: ' 特色活动 ' },
        { type: 'heading', level: 3, text: ' 盘王节长鼓舞表演 ' },
        {
            type: 'paragraph',
            text: ' 盘王节是瑶族最为隆重的节日之一，在这个节日里，瑶族长鼓舞表演是重头戏。舞者们身着华丽的瑶族服饰，头戴精美的头饰，手持长鼓，在盘王神像前翩翩起舞。舞蹈动作丰富多样，有模仿动物的形态，如“大鹏展翅”“猛虎下山”；也有表现劳动场景的动作，如“耕地播种”“收割打谷”。舞者们通过精湛的技艺，将长鼓舞的独特魅力展现得淋漓尽致，表达对祖先的敬仰和对美好生活的向往。',
        },
        { type: 'heading', level: 3, text: ' 长鼓舞比赛 ' },
        {
            type: 'paragraph',
            text: ' 为了传承和弘扬瑶族长鼓舞文化，许多瑶族聚居地会举办长鼓舞比赛。比赛中，来自不同村落的舞蹈队纷纷展示自己的技艺。他们在舞蹈动作的编排、节奏的把握、服装道具的搭配等方面各显神通。评委们根据舞蹈的技巧难度、艺术表现力、团队协作等方面进行评分。长鼓舞比赛不仅激发了瑶族人民对长鼓舞的热爱，也促进了长鼓舞艺术的交流与发展。',
        },
        { type: 'heading', level: 3, text: ' 长鼓舞进课堂 ' },
        {
            type: 'paragraph',
            text: ' 为了让更多的年轻人了解和学习瑶族长鼓舞，一些瑶族地区的学校将长鼓舞纳入了校本课程。在课堂上，专业的舞蹈老师向学生们传授长鼓舞的基本动作、舞蹈技巧和文化内涵。学生们通过学习长鼓舞，不仅掌握了一门艺术技能，还增强了对本民族文化的认同感和自豪感，为瑶族长鼓舞的传承培养了后备力量。',
        },
        { type: 'heading', level: 2, text: ' 文化象征 ' },
        {
            type: 'paragraph',
            text: ' 祖先崇拜与民族信仰：瑶族长鼓舞是瑶族人民对祖先崇拜和民族信仰的生动体现。通过长鼓舞的表演，瑶族人民缅怀祖先的功绩，传承祖先的精神，表达对神灵的敬畏和祈求。它是瑶族文化传承的重要载体，维系着瑶族人民的精神纽带。民族精神与文化认同：长鼓舞的舞蹈动作刚劲有力、富有节奏感，体现了瑶族人民坚韧不拔、乐观向上的民族精神。同时，长鼓舞作为瑶族文化的重要符号，增强了瑶族人民的文化认同感和归属感，促进了民族的团结和凝聚力。艺术价值与文化交流：瑶族长鼓舞具有独特的艺术价值，其舞蹈动作优美、节奏明快，融合了音乐、舞蹈、服饰等多种艺术元素。它不仅是瑶族文化的瑰宝，也为世界文化的多样性做出了贡献。在对外文化交流中，瑶族长鼓舞以其独特的魅力吸引了众多国内外观众的关注，成为传播瑶族文化、促进文化交流的重要桥梁。',
        },
    ],
    // images: [
    //     {
    //         src: require('@/assets/images/article/yao_drum_1.jpg'),
    //         alt: '瑶族长鼓舞表演',
    //         height: 200,
    //         desc: '瑶族长鼓舞表演'
    //     },
    //     {
    //         src: require('@/assets/images/article/yao_drum_2.jpg'),
    //         alt: '瑶族舞者手持长鼓',
    //         height: 300,
    //         desc: '瑶族舞者手持长鼓'
    //     }
    // ]
};
const articleDataList = [articleData, articleData1, articleData2, articleData3];
// 新增地图配置
const getMapOption = (params) => ({
    tooltip: { trigger: 'item' },
    visualMap: {
        show: false,
        min: 0,
        max: 1,
        left: 'right',
        calculable: true,
        inRange: { color: ['#e6f7ff', '#3C6256'] },
    },
    series: [
        {
            type: 'map',
            map: 'guangdong',
            roam: true,
            label: { show: true },
            data: [{ name: params, value: 1 }],
        },
    ],
});

// 修改组件部分
function ArticleDetail() {
    // const [activeTabKey, setActiveTabKey] = React.useState('1');
    const location = useLocation();
    const articleId = location.pathname.split('/').pop();
    const [artData, setArtData] = React.useState({});
    console.log(artData);

    useEffect(() => {
        registerMap('guangdong', guangdong);
        if (articleId) {
            getCultPopDetail(articleId).then((res) => {
                console.log(res);
                if (res?.data) {
                    setArtData(res.data);
                }
            });
        }
    }, [articleId]);

    const ContentSection = ({ section }) => {
        switch (section.type) {
            case 'heading':
                return React.createElement(`h${section?.level}`, null, section?.content);
            case 'paragraph':
                return (
                    <p
                        style={{
                            textIndent: '2em',
                            marginBottom: 16,
                        }}
                    >
                        {section?.content}
                    </p>
                );
            case 'list':
                return (
                    <ul
                        style={{
                            listStyleType: 'circle',
                            paddingLeft: 20,
                        }}
                    >
                        {section?.content?.map((item, i) => (
                            <li key={i}>{item?.content}</li>
                        ))}
                    </ul>
                );
            default:
                return null;
        }
    };

    const ImageGallery = ({ images }) => {
        if (!images?.length) return null;

        return images
            ?.filter((item) => item.imageType === 'CONTENT')
            .map((img, i) => {
                console.log('路径', urlMap.defaultUrl + imagesMap.thridPicturePath + articleId + '/' + img?.imagePath);
                return (
                    <div
                        key={i}
                        style={{
                            flex: images.length > 2 ? 'none' : 1,
                            minHeight: `${img.height}px`,
                        }}
                    >
                        <img
                            src={urlMap.defaultUrl + imagesMap.thridPicturePath + articleId + '/' + img?.imagePath}
                            alt={img.altText}
                            style={{
                                width: '100%',
                                height: images.length === 1 ? '100%' : `${img.height}px`,
                                objectFit: 'cover',
                                borderRadius: '8px',
                                marginBottom: '8px',
                            }}
                        />
                        <p style={{ textAlign: 'center', color: '#666' }}>{img.description}</p>
                    </div>
                );
            });
    };

    // 视频播放器组件
    const VideoPlayer = ({ videoPath, articleId, description }) => {
        return (
            <div
                style={{
                    marginBottom: 24,
                    display: 'flex',
                    flexDirection: 'column',
                    alignItems: 'center',
                }}
            >
                <video
                    controls
                    style={{
                        width: '80%',
                        borderRadius: 8,
                        boxShadow: '0 2px 8px rgba(0,0,0,0.1)',
                    }}
                    src={`${urlMap.defaultUrl}${imagesMap.thridPicturePath}${articleId}/${videoPath}`}
                />
                <p style={{ textAlign: 'center', color: '#666', marginTop: 8 }}>{description}</p>
            </div>
        );
    };

    return (
        <div className="art-container" style={{ backgroundColor: COLOR_THEME.BG_SECONDARY }}>
            <Card
                title={<h1>{artData?.title}</h1>}
                className="art-card"
                styles={{
                    header: {
                        backgroundColor: COLOR_THEME.BG_TERTIARY,
                        width: '100%',
                        height: '80px',
                    },
                    body: {
                        padding: 0,
                        height: 'calc(100% - 80px)',
                        overflow: 'hidden',
                    },
                }}
            >
                <div
                    className="content-scroll"
                    style={{
                        padding: '20px',
                        fontFamily: 'Arial,sans-serif',
                        display: 'flex',
                        flexDirection: 'column',
                        gap: '40px',
                        height: '93%',
                        overflowY: 'auto',
                        scrollbarWidth: 'thin',
                    }}
                >
                    {artData?.videos && artData?.videos.length > 0 && (
                        <VideoPlayer
                            videoPath={artData?.videos?.[0]?.videoPath}
                            articleId={articleId}
                            description={artData?.videos?.[0]?.description}
                        />
                    )}
                    <div
                        style={{
                            display: 'flex',
                            gap: '40px',
                            flexDirection: 'row',
                        }}
                    >
                        <div style={{ flex: 1 }}>
                            {artData?.content?.map((section, i) => (
                                <ContentSection key={i} section={section} />
                            ))}
                        </div>

                        <div
                            style={{
                                width: artData.images?.length ? '30%' : 0,
                                minWidth: artData.images?.length ? '30%' : 0,
                                height: '100%',
                                display: 'flex',
                                flexDirection: 'column',
                                gap: '20px',
                                transition: 'all 0.3s',
                            }}
                        >
                            <ImageGallery images={artData?.images} />
                        </div>
                    </div>
                    {false && (
                        <div
                            style={{
                                width: '90%',
                                marginTop: 40,
                                marginLeft: 'auto',
                                marginRight: 'auto',
                                paddingTop: 20,
                                borderTop: '1px solid #f0f0f0',
                            }}
                        >
                            <h2 style={{ marginBottom: 16 }}>文化所在地区</h2>
                            <ReactECharts
                                option={getMapOption('广州市')}
                                style={{
                                    height: 400,
                                    borderRadius: 8,
                                    boxShadow: '0 2px 8px rgba(0,0,0,0.1)',
                                }}
                                echarts={echarts}
                            />
                        </div>
                    )}
                </div>
            </Card>
        </div>
    );
}

export default ArticleDetail;
